<template>
  <div class="helpCenter">
    <div class="helpCenter-header">
      <div class="mask">
        <div class="mask-title">帮助中心</div>
        <div class="mask-desc">全方位为您提供贴心服务</div>
      </div>
    </div>
    <div class="helpCenter-title">
      <div class="title-top">产品答疑</div>
      <div class="title-bottom">解决您在软件使用过程中的困惑和问题</div>
    </div>
    <div class="helpCenter-list">
      <div class="list">
        <div class="list-title">
          <img src="@/assets/helpCenter/index_pro_icon1.png" alt="" />
          视频剪辑软件制作软件
        </div>
        <listItem
          v-for="(item, index) in list1"
          :key="index"
          :detail="item"
        ></listItem>
      </div>
      <div class="list">
        <div class="list-title">
          <img src="@/assets/helpCenter/index_pro_icon2.png" alt="" />
          教育教学软件
        </div>
        <listItem
          v-for="(item, index) in list2"
          :key="index"
          :detail="item"
        ></listItem>
      </div>
      <div class="list">
        <div class="list-title">
          <img src="@/assets/helpCenter/index_pro_icon3.png" alt="" />
          办公效率软件
        </div>
        <listItem
          v-for="(item, index) in list3"
          :key="index"
          :detail="item"
        ></listItem>
      </div>
    </div>
    <div class="helpCenter-problem">
      <div class="container">
        <div class="container-title">热门问题</div>
        <div class="problem-list">
          <div v-for="(item, index) in problemList" :key="index">
            {{ item.title }}
          </div>
        </div>
        <div class="problem-desc">
          答：VIP账户是一个账户对应一台电脑，如果想在其他电脑上登录需要先在VIP后台解绑，才可以在其他电脑上登录。<span
            >如何解绑VIP账户？</span
          >
        </div>
      </div>
    </div>
    <div class="helpCenter-contact">
      <div class="container">
        <div class="contact-title">联系我们</div>
        <div class="contact-list">
          <div
            class="list-item"
            v-for="(item, index) in contactList"
            :key="index"
          >
            <div class="title">{{ item.title }}</div>
            <div>{{ item.desc }}</div>
          </div>
        </div>
        <textarea
          style="width: 98%; height: 300px; margin-top: 50px"
          placeholder="还有其他问题？环境留言～"
        ></textarea>
        <div
          style="
            display: flex;
            align-items: center;
            justify-content: space-between;
          "
        >
          <div>
            <input type="text" placeholder="请输入您的邮箱（必填）" />
            <input type="text" placeholder="请输入您的手机号）" />
          </div>

          <div class="submit">提交</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, toRefs } from "vue";
import listItem from "@/components/list/list-item.vue";
import img1 from "@/assets/evstore/icon_evluping@2x.png";
import img2 from "@/assets/evstore/icon_evjianji@2x.png";
import img3 from "@/assets/evstore/icon_evshipingzhuanhuan@2x.png";
import img4 from "@/assets/evstore/icon_zuhe@2x.png";
import img5 from "@/assets/evstore/icon_evtouping@2x.png";
import img6 from "@/assets/evstore/icon_evcam@2x.png";
import img7 from "@/assets/evstore/store_icon_kuozhanp@2x.png";
import img8 from "@/assets/evstore/icon_evpingmugongxiang@2x.png";
import img9 from "@/assets/evstore/icon_evjiami@2x.png";
import img10 from "@/assets/evstore/icon_evjiami2@2x.png";
import img11 from "@/assets/evstore/icon_evduoliao@2x.png";
import img12 from "@/assets/evstore/icon_evhudong@2x.png";
import img13 from "@/assets/evstore/icon_evcloudenc@2x.png";
import img14 from "@/assets/evstore/icon_evyuanchengxiezhu@2x.png";
import img15 from "@/assets/evstore/index_pro_logo5.png";
import img16 from "@/assets/evstore/index_pro_logo7.png";
import img17 from "@/assets/evstore/logo40.png";
import img21 from "@/assets/evstore/evcloudmeeting_logo.png";
let data = reactive({
  list1: [
    {
      title: "EV录屏",
      desc: "免费无水印桌面录屏",
      path: "",
      icon: img1,
    },
    {
      title: "EV剪辑",
      desc: "轻松易上手快速剪辑",
      path: "",
      icon: img2,
    },
    {
      title: "EV视频转换器",
      desc: "专业的视频压缩、格式转换软件",
      path: "",
      icon: img3,
    },
    {
      title: "EV虚拟摄像头",
      desc: "让手机秒变电脑高清摄像头和麦克风",
      path: "",
      icon: img6,
    },
    {
      title: "EV直播助手",
      desc: "电脑直播推流工具",
      path: "",
      icon: img5,
    },
  ],
  list2: [
    {
      title: "EV加密 2",
      desc: "商家端 - EV加密2代，体验升级",
      path: "",
      icon: img3,
    },
    {
      title: "EV加密2播放器",
      desc: "学员端 - 登录账号观看加密视频",
      path: "",
      icon: img15,
    },
    {
      title: "EV加密 1",
      desc: "商家端 - 防提取、防翻录、防破解",
      path: "",
      icon: img9,
    },
    {
      title: "EV加密播放器",
      desc: "学员端 - 通过激活码观看加密视频",
      path: "",
      icon: img16,
    },
    {
      title: "EV互动",
      desc: "教学会议直播互动工具",
      path: "",
      icon: img12,
    },
    {
      title: "云课堂",
      desc: "一站式网校软件",
      path: "",
      icon: img17,
    },
    {
      title: "云加密",
      desc: "一站式授权管理的加密版权保护软件",
      path: "",
      icon: img13,
    },
  ],
  list3: [
    {
      title: "EV屏幕共享",
      desc: "局域网屏幕共享的协作工具",
      path: "",
      icon: img8,
    },
    {
      title: "EV投屏",
      desc: "多平台共享，一键投屏",
      path: "",
      icon: img5,
    },
    {
      title: "EV远程协助",
      desc: "跨平台远程协助工具",
      path: "",
      icon: img14,
    },
    {
      title: "EV多聊",
      desc: "高效的微信客户管理工具",
      path: "",
      icon: img11,
    },
    {
      title: "EV扩展屏",
      desc: "手机/平板 秒变电脑副屏",
      path: "",
      icon: img7,
    },
    {
      title: "极速直播",
      desc: "高清超低延迟的视频会议直播软件",
      path: "",
      icon: img21,
    },
  ],
  problemList: [
    {
      title: "EV录屏 - 怎样才能最大化修复好损坏视频！",
      path: "",
    },
    {
      title: "EV录屏 - Win7、Win8、win10如何录制高质量声音？",
      path: "",
    },
    {
      title: "EV录屏 - 如何解决无法录制QQ窗口的问题",
      path: "",
    },
    {
      title: "EV录屏 - 如何进行在线直播?",
      path: "",
    },
    {
      title: "EV剪辑 - EV剪辑如何给视频添加字幕",
      path: "",
    },
    {
      title: "EV加密2 - EV加密2如何使用？",
      path: "",
    },
    {
      title: "在公司登录了VIP，为什么在家里不能登录了？",
      path: "",
    },
  ],
  contactList: [
    {
      title: "商务合作邮箱",
      desc: "fish@ieway.cn",
    },
    {
      title: "意见收集邮箱",
      desc: "1965477463@qq.com",
    },
    {
      title: "销售咨询电话",
      desc: "18570071682",
    },
  ],
});
let { list1, list2, list3, problemList, contactList } = toRefs(data);
</script>
<style lang="less" scoped>
.helpCenter {
  &-header {
    background: url("@/assets/helpCenter/help_bg0.jpg") center center no-repeat;
    background-size: cover;
    height: 350px;
    position: relative;
    .mask {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 100%;
      background: rgba(17, 30, 47, 0.8);
      z-index: 888;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      &-title {
        font-size: 36px;
        line-height: 60px;
        padding-top: 34px;
        color: #fff;
        text-align: center;
      }
      &-desc {
        line-height: 33px;
        max-width: 530px;
        font-weight: normal;
        color: #fff;
      }
    }
  }
  &-title {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 60px 0;
    .title-top {
      font-size: 36px;
      line-height: 60px;
      color: #333;
      text-align: center;
    }
    .title-bottom {
      font-size: 16px;
    }
  }
  &-list {
    width: 1180px;
    margin: 0 auto;
    display: flex;
    align-items: flex-start;
    margin-bottom: 40px;
    .list {
      width: 370px;
      height: 570px;
      padding: 20px;
      box-sizing: border-box;
      margin-right: 30px;
      border: 1px solid #e4ebf3;
      cursor: pointer;
      border-radius: 4px;
      .list-title {
        display: flex;
        align-items: center;
        height: 20px;
        line-height: 20px;
        color: #999;
        margin-bottom: 28px;
        img {
          width: 20px;
          height: 20px;
          vertical-align: middle;
        }
      }
    }
  }
  &-problem {
    background: #fbfbfb;
    padding-top: 80px;
    padding-bottom: 120px;
    .container {
      width: 1180px;
      margin: 0 auto;
      &-title {
        font-size: 28px;
        text-align: center;
        line-height: 40px;
        margin: 60px 0 16px 0;
      }
      .problem-list {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        div {
          font-size: 16px;
          display: inline-block;
          list-style: square inside !important;
          width: 450px;
          line-height: 40px;
          margin-left: 120px;
          cursor: pointer;
        }
        div:hover {
          color: #53a8ff;
        }
      }
      .problem-desc {
        margin-left: 120px;

        color: #808080;
        span {
          color: #53a8ff;
        }
      }
    }
  }
  &-contact {
    padding-bottom: 100px;
    .container {
      width: 1180px;
      margin: 0 auto;
      .contact-title {
        text-align: center;
        line-height: 40px;
        margin: 60px 0 16px 0;
        font-size: 28px;
      }
      .contact-list {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .list-item {
          width: 240px;
          padding: 20px;
          margin-right: 20px;
          background: #f5f5f5;
          font-size: 14px;
          .title {
            margin-bottom: 5px;
          }
        }
      }
      input {
        // width: 1140px;
        border-color: #e6e6e6;
        padding: 10px;
      }
      .submit {
        height: 34px;
        line-height: 34px;
        float: right;
        box-shadow: none;
        background: #4a90e2;
        color: #fff;
        width: 174px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 15px;
      }
    }
  }
}
</style>
